<template>
  <a-card :bordered="false" style="height: 100%; overflow-y: auto;">
    <a-form-model
      ref="queryForm"
      class="query-form"
      layout="inline"
      :model="queryParam"
      @keyup.enter="loadData(1)"
    >
      <a-form-model-item class="form-item" prop="serviceCode">
        <a-input placeholder="请输入服务代码" v-model="queryParam.serviceCode" @keyup.enter="searchQuery"/>
      </a-form-model-item>
      <a-form-model-item class="form-item" prop="serviceName">
        <a-input placeholder="请输入服务名称" v-model="queryParam.serviceName" @keyup.enter="searchQuery"/>
      </a-form-model-item>
      <a-form-model-item>
        <a-button-group style="margin-right:12px">
          <a-button type="primary" @click="searchQuery"><i class="iconfont icon-chazhao"></i>查询</a-button>
          <a-button @click="searchReset"><i class="iconfont icon-qingkong"></i>重置</a-button>
        </a-button-group>
        <a-button type="primary" @click="addManage" icon="plus" style="margin-right:12px">服务</a-button>
      </a-form-model-item>
    </a-form-model>
    <a-spin :spinning="loading">
      <a-table
        bordered
        :columns="columns"
        :pagination="ipagination"
        :data-source="dataSource"
        rowKey="id"
        class="center-page"
        style="margin-top: 36px"
        @change="handleTableChange"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="TimeDeal" slot-scope="text, record">
          {{ timeFormat(record.createTime, 'yyyy-MM-dd hh:mm:ss') }}
        </span>
        <span slot="serviceCode" class="slot-style" slot-scope="text, record" @click="check(record)">
          {{record.serviceCode}}
        </span>
        <span slot="serviceName" class="slot-style" slot-scope="text, record" @click="check(record)">
          {{record.serviceName}}
        </span>
        <span slot="action" slot-scope="text, record">
          <div>
            <auth-button
              type="primary"
              :ghost="true"
              size="small"
              :disabled="record.isBind===true"
              @click="edit(record)"
              style="margin-right: 8px;"
            ><i class="iconfont icon-xiugai"/>编辑 </auth-button>
            <auth-button
              type="danger"
              :ghost="true"
              size="small"
              :disabled="record.isBind===true"
              @click="deleteR(record)"
            ><i class="iconfont icon-shanchu3 deleteUlr"/>删除</auth-button>
          </div>
        </span>
      </a-table>
    </a-spin>
  </a-card>
</template>
<script>
import { mapState } from 'vuex'
import { axios } from '@/utils/request'
import { STable } from '@/components'
import modelManage from './components/modelManage.vue'
import modelDetail from './components/modelDetail.vue'
import AuthText from '@/components/AuthText'
import {minxinDrawerUse} from "@/utils/mixin"
import AuthButton from '@/components/AuthButton'
export default {
  name: 'StateMent',
  mixins: [minxinDrawerUse],
  data () {
    return {
      queryParam: {
        serviceCode: '',
        serviceName: ''
      },
      loading: false,
      exporting: false,
      state: 'add',
      exportType: 0,
      dataSource: [],
      serverList: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        size: 'small',
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      nowTime: 156789,
      columns: [
        {
          title: '服务代码',
          align: 'center',
          scopedSlots: { customRender: 'serviceCode' }
        },
        {
          title: '服务名称',
          align: 'center',
          scopedSlots: { customRender: 'serviceName' }
        },
        {
          title: '服务归属域',
          dataIndex: 'serviceScope',
          align: 'center'
        },
        {
          title: '服务分类',
          dataIndex: 'serviceType',
          align: 'center'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
          scopedSlots: { customRender: 'TimeDeal' }
        },
        {
          title: '创建人',
          dataIndex: 'createBy',
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'orderId',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.orderManagement.queryParams
    })
  },
  components: {
    modelManage,
    modelDetail,
    AuthText,
    AuthButton
  },
  methods: {
    timeFormat (time, format) {
      const TIME = new Date(time)
      const DEL = data => (data < 10 ? '0' + data : data)
      const TMOBJ = {
        yyyy: TIME.getFullYear(),
        yy: TIME.getFullYear() % 100,
        MM: DEL(TIME.getMonth() + 1),
        M: TIME.getMonth() + 1,
        dd: DEL(TIME.getDate()),
        d: TIME.getDate(),
        hh: DEL(TIME.getHours()),
        h: TIME.getHours(),
        mm: DEL(TIME.getMinutes()),
        m: TIME.getMinutes(),
        ss: DEL(TIME.getSeconds()),
        s: TIME.getSeconds()
      }
      const reg1 = /(y+.)m+(.d+)/gi
      const reg2 = /(h+.)m+(.s+)/gi
      format = format.toLowerCase().replace(reg1, '$1MM$2').replace(reg2, '$1mm$2')
      for (const i in TMOBJ) {
        format = format.replace(i, TMOBJ[i])
      }
      return format
    },
    check (record) {
      this.showRightDrawer(modelDetail, '服务详情', [], '840px', {timeFormat: this.timeFormat, detail: record})
    },
    addManage () {
      this.state = 'add'
      const buttons = this.getRightDrawerFooterButtons()
      this.showRightDrawerNoReset(modelManage, '新增服务', buttons, '500px', {state: this.state})
    },
    saveData(params) {
      const serverType = this.state === 'edit' ? 'put' : 'post'
      return new Promise((resolve, reject) => {
        axios[serverType]('/service-sale/service/member/' + this.state, params).then(data => {
          if (data.message === 'success') {
            this.loadData(1)
          } else {
            this.$message.error(data.message)
          }
          resolve(data)
        }).catch(err => {
          reject(err)
        })
      })

    },
    searchReset () {
      this.$refs.queryForm.resetFields()
      this.loadData(1)
    },
    searchQuery () {
      console.log(this.queryParam)
      this.loadData(1)
    },
    filterObj (obj) {
      if (!(typeof obj === 'object')) {
        return
      }
      for (const key in obj) {
        if ((obj.hasOwnProperty(key) &&
          (obj[key] == null || obj[key] === undefined || obj[key] === '')) ||
          key.indexOf('selectedTime') > -1) {
          delete obj[key]
        }
      }
      return obj
    },
    getQueryParams () {
      var param = Object.assign({}, this.queryParam)
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return this.filterObj(param)
    },
    loadData (arg) {
      if (arg === 1) {
        this.ipagination.current = 1
      }
      this.loading = true
      var params = this.getQueryParams()
      this.rowSelected = []
      axios.get('/service-sale/service/member/list', { params: params }).then(data => {
        this.loading = false
        console.log(data)
        this.ipagination.total = data.totalCount
        this.dataSource = data.data
      })
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
      this.loadData()
    },
    edit (record) {
      this.state = 'edit'
      const buttons = this.getRightDrawerFooterButtons()
      this.showRightDrawer(modelManage, '新增服务', buttons, '500px', {state: this.state, recordData: JSON.parse(JSON.stringify(record))})
    },
    deleteR (record) {
      console.log(record)

      this.$confirm({
        title: '确认删除?',
        content: '',
        onOk: () => {
          axios.delete('/service-sale/service/member/del', { data: { id: record.id } }).then(data => {
            if (data.message === 'success') {
              this.$message.success('删除成功')
              this.loadData(1)
            }
          })
        },
        onCancel () {
          console.log('Cancel')
        },
        class: 'test'
      })
    },
    getServiceList() {
      axios.get('/service-sale/service/member/serviceList').then(data => {
        this.serverList = data.data
      })
    }
  },
  mounted () {
    this.loadData(1)
    this.getServiceList()
  }
}
</script>
<style>
.mine-drawer.ant-drawer-open .ant-drawer-mask {
  opacity: 0;
  background: none;
}
.mine-drawer .ant-drawer-title {
  font-weight: bold;
}
</style>
<style lang="less">
.slot-style {
  color:#4388A6;
  cursor: pointer;
}
.ant-table-pagination.ant-pagination {
  display: block;
  float: none;
  text-align: center;
}
</style>
